<template>
	<div class="strut-div">
		<div class="dept-perf-div">
			<div v-for="(item, index) in dataList" :key="index">
				<i :class="index|iconClass">{{index+1}}</i>
				<span>{{item.deptName}}</span>
				<div :style="[{width:230*(item.count/maxValue) + 'px'},{background:config.option.color}]"></div>
				<b>{{item.count}}万元</b>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['config'],
		components: {
			
		},
		filters: {
			iconClass(index) {
				if (index <= 2) {
					return 'list-icon-' + (index+1);
				} else{
					return 'list-icon';
				}
				
			}
		},
		data() {
			return {
				dataList:[],
				maxValue:0,
			}
		},
		methods: {
			initChart() {
				setTimeout((res) => {
					this.dataList = this.config.option.data;
					
					for (var i = 0; i < this.dataList.length; i++) {
						if (this.maxValue < this.dataList[i].count) {
							this.maxValue = this.dataList[i].count;
						}
					}
					
				}, 300);
			}
		},
		mounted() {
			
		}
	}
</script>

<style scoped lang="scss" type="text/scss">
	.dept-perf-div {
		> div {
			height: 30px;
			margin-top: 11px;
			line-height: 30px;
			i {
				font-size: 12px;
				font-style: normal;
				float: left;
				width: 30px;
				height: 30px;
				text-align: center;
			}
			
			span {
				font-size: 14px;
				float: left;
				margin-left: 5px;
				color: #E9F4FF;
				margin-right: 25px;
			}
			
			div {
				float: left;
				height: 10px;
				margin-top: 10px;
			}
			
			b {
				float: right;
				font-size: 12px;
				color: #FBCC13;
			}
		}
		
	}
</style>